<template>
    <!-- 个人中心 -->
    <div id="inLike">
        <Nav></Nav>
        <div style="margin: 20px auto;width: 80%;">
            <div class="body">
                <div class="top">
                    <img :src="'/api/' + user.headImg"><br>
                    <span style="color:white;">{{ user.userName }}</span><br>
                    <div class="like">
                        <router-link to="/like" class="me">我喜欢</router-link>
                        <router-link to="/information" class="me">个人信息</router-link>
                    </div>
                </div>
                <router-view />
            </div>
        </div>
        <Footer></Footer>
    </div>
</template>

<script>
import Nav from "../components/nav.vue";
import Footer from "../components/footer.vue";
import { mapState, mapMutations } from "vuex";
export default {
    data() {
        return {

        }
    },
    components: {
        Nav,
        Footer
    },
    computed: {
        ...mapState("user", ["user"])
    },
    methods: {
        ...mapMutations("user", ["userLogin"]),
    },
};
</script>

<style>
#inLike {
    text-align: center;
    margin: 0px;
    padding: 0px;
}

#inLike .body {
    display: flex;
    flex-wrap: wrap;
    text-align: left;
}

#inLike .body .top {
    width: 100%;
    padding-top: 20px;
    background-size: cover;
    background-image: url("../../public/背景.jpg");
    text-align: center;
}

#inLike .body .top img {
    border-radius: 70px;
    height: 110px;
    width: 110px;
    border: white 5px solid;
}

#inLike .body .top .like {
    float: left;
    margin-bottom: 10px;
}

#inLike .body .top .like .me {
    margin-left: 10px;
    color: white;
    text-decoration: none;
}

#inLike .body .top .like .me:hover {
    cursor: pointer;
    color:aqua;
}
</style>